import React from 'react';
import './list.css'
import { withRouter } from 'react-router-dom';

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sayData:[]
    };
  }
  
  componentDidMount(){
    this.getSayData();
  }

  getSayData(){
		fetch("https://www.prebeauty.work/saying")
			.then((res) => res.json())
			.then(data => {
        var newSayData=[]
        newSayData= data.sort(this.compare('likenum')).slice(0,3)
				this.setState({
					sayData:newSayData
				})
				console.log(this.state.sayData)
			})
			.catch(err => console.log(err));
	}

  //比较大小
  compare(property){
    return function(a,b){
      var value1 = a[property];
      var value2 = b[property];
      return value2 - value1;
    }
  }

  render() {
      return (
        <div>
          {this.state.sayData.map((data)=>(
            <div 
              style={{ padding:0 }} 
              onClick={()=>
                this.props.history.push(
                  {
                    pathname:'/SayDetail',
                    state:{
                      name: data.name,
                      time: data.time,
                      content: data.content,
                      imgsrc: data.imgsrc,
                      likenum: data.likenum,
                      commentnum: data.commentnum,
                      sayid: data.sayid,
                      userid:data.userid
                    }
                  })
                
              }>
              <div style={{ display: '-webkit-box', display: 'flex',padding:'10px', margin: '15px 0',backgroundColor:'#f5f5f5',border:'1px solid #95d2aa'}}>
                <div style={{ lineHeight: 1 }}>
                  <div style={{ margin: '10px 0px', fontWeight: 'bold',overflow:'hidden',fontSize:'20px',color:'#333'}}>{data.title}</div>
                  <div style={{ height:'33px',marginBottom: '5px',overflow:'hidden',color:'gray'}}>{data.jianjie}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      );
  }
}
export default withRouter(List)